<!DOCTYPE html>
<html>
<head>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/south-street/ui.all.css" rel="stylesheet">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px ;background-color:#EEE}
 
  #map{width:75%; height:100%;float:left;background-color:#EEE;margin-left:5px;} 
  #map_canvas {width:100%;height:67%;float:left;border:solid 1px #999 }
  #map_info{width:100%;height:33%;float:left;background-color:#EEE;padding:4x}
 
  #control{height:99%;float:left;width:24%;}
  #control_top{width:100%;height:75%;float:left;background-color:#EEE;}
  #control_bottom{width:100%;height:25%;float:left;background-color:#009900}

  
#tabs-smaller .ui-tabs-nav li {
	margin-top: 0em;
	font-size: 80%;
}
  
  div,body{
	font-family:tahoma,arial,helvetica;
	font-size:11px;
  }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src='<?php echo base_url();?>/app/views/default/user/map.js'></script>
<title><?php echo $this->config->item("app_name")." v. ".$this->config->item("app_v"); ?></title>
</head>
<body onload="initialize()">


<div id="map">	
<div style='background-color:#FF0000;position:absolute;width:200px;height:100px;z-index:1000;right:10px;top:10px;'>
	<div style="padding:5px;">
		Device <br/>
		History<br/>
	</div>
</div>
  <br>	
  <div id="map_canvas">  
  </div>
  <div id="map_info">
  
<!-- tab -->
<br/>
<div style='height:92%;'>
<div style="padding:5px;">
<div id="tabs-history" class="tabs">
	<ul>
		<li><a href="#tabs-history-1" name="tabs-history">History</a></li>
	</ul>
	<div id="tabs-history-1">
		<div style='100%;overflow:auto;height:130px'>
		<table width="100%" style='border:solid 1px #CCC'>
			<tr style='background-color:#00CC00;color:#FFFFFF;font-weight:bold;text-align:center'>
				<td>NO</td>
				<td>Tgl</td>
				<td>Jam</td>
				<td>Posisi</td>
				<td>Tag</td>
				<td>Deskripsi</td>
			</tr>
			
			<tr>
				<td>1</td>
				<td>1-1-2012</td>
				<td>10:10</td>
				<td>103.000,6.000</td>
				<td>Pom Bensin</td>
				<td>Pom Bensin Rawamangun - Jl. Balai Pustaka Baru 1</td>				
			</tr>

			<tr>
				<td>1</td>
				<td>1-1-2012</td>
				<td>10:15</td>
				<td>103.000,6.700</td>
				<td>-</td>
				<td>-</td>								
			</tr>

			<tr>
				<td>1</td>
				<td>1-1-2012</td>
				<td>10:20</td>
				<td>103.000,7.00</td>
				<td>-</td>
				<td>-</td>												
			</tr>
			
		</table>
		</div>
	</div>
</div>
<!-- tab -->		
</div>
</div>
  
  </div>  
</div>
  
  <div id='control'>
	<div id='control_top'>
		<div style='padding:10px'>
		<div style='text-align:right;width:inherit'>
			<?php echo $this->session->userdata('email') ?> | <a href='<?php echo site_url("user/main/signout/".date("YmdHis")); ?>'>Sign Out</a>
		</div>
		<br><br>

<!-- tab -->
<div id="tabs-plain" class="tabs">
	<ul>
		<li><a href="#tabs-plain-1" name="tabs-plain">Device</a></li>	
		<li><a href="#tabs-plain-2">Planner</a></li>
		<li><a href="#tabs-plain-3">Config</a></li>
		<li><a href="#tabs-plain-4">Share</a></li>
	</ul>
	
	<div id="tabs-plain-1" >
		List of your Device(s)&nbsp;<br/><br/>
		<div style='height:350px;overflow:auto;border:solid 1px #EEE'>
		<table width='100%' style='border:solid 1px #CCC'>
			<tr style='background-color:#00CC00;color:#FFFFFF;font-weight:bold;text-align:center'>
				<td><input type='checkbox' /></td>
				<td>ID</td>
				<td>Description</TD>
			</tr>
			<tr>
				<td><input type='checkbox' /></td>
				<td>ME456756567BG</td>
				<td>Samsung Galaxy SII</TD>
			</tr>				
			<tr>
				<td><input type='checkbox' /></td>
				<td>ME45444347BVY</td>
				<td>Nexian Journey</TD>
			</tr>							
			<tr>
				<td><input type='checkbox' /></td>
				<td>ME45444347BVY</td>
				<td>Nexian Journey</TD>
			</tr>							
			<tr>
				<td><input type='checkbox' /></td>
				<td>ME45444347BVY</td>
				<td>Nexian Journey</TD>
			</tr>							
			<tr>
				<td><input type='checkbox' /></td>
				<td>ME45444347BVY</td>
				<td>Nexian Journey</TD>
			</tr>							
			<tr>
				<td><input type='checkbox' /></td>
				<td>ME45444347BVY</td>
				<td>Nexian Journey</TD>
			</tr>							
			<tr>
				<td><input type='checkbox' /></td>
				<td>ME45444347BVY</td>
				<td>Nexian Journey</TD>
			</tr>							
			<tr>
				<td><input type='checkbox' /></td>
				<td>ME45444347BVY</td>
				<td>Nexian Journey</TD>
			</tr>							
			<tr>
				<td><input type='checkbox' /></td>
				<td>ME45444347BVY</td>
				<td>Nexian Journey</TD>
			</tr>							
			<tr>
				<td><input type='checkbox' /></td>
				<td>ME45444347BVY</td>
				<td>Nexian Journey</TD>
			</tr>							
			<tr>
				<td><input type='checkbox' /></td>
				<td>ME45444347BVY</td>
				<td>Nexian Journey</TD>
			</tr>							
			
		</table>
		
		  <input type='button' id='initMap' value='Refresh Map' onClick="initialize()">
		  <input type='button' id='showLine' value='Show Line' onClick="showLine()">
		  <input type='button' id='hideLine' value='Hide Line' onClick="hideLine()">	
		  <input type='button' id='clearLine' value='Clear Line' onClick="clearLine()">
		
		</div>
	</div>
	<div id="tabs-plain-2" >
		<div style='height:350px;overflow:auto;border:solid 1px #EEE'>
		<p>Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium,
			felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!</p>
		</div>
	</div>
	<div id="tabs-plain-3" >
		<div style='height:350px;overflow:auto;border:solid 1px #EEE'>
		<p> asdf asdf asdfPellentesque ac elit et nulla posuere convallis quis ut dolor. Pellentesque egestas
			pellentesque blandit. Morbi quis sapien nec lacus consectetur vestibulum.</p>
		</div>
	</div>
	
	<div id="tabs-plain-4"  >
		<div style='height:350px;overflow:auto;border:solid 1px #EEE'>
		<p>Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium,
			felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!</p>
			
		  <input type='button' id='initMap' value='Refresh Map' onClick="initialize()">
		  <input type='button' id='showLine' value='Show Line' onClick="showLine()">
		  <input type='button' id='hideLine' value='Hide Line' onClick="hideLine()">	
		  <input type='button' id='clearLine' value='Clear Line' onClick="clearLine()">
		</div>	
	</div>	
	
</div>
<!-- tab -->		
		</div>
	</div>
	
	<div id='control_bottom'>	
	<!-- place for ads ? -->
	<div style='padding:5px;'>
		Panaroekan v.0.1
		by satiri.a@gmail.com
	</div>
	</div>
	
  </div>  
  <div style='clear:both;display:none'></div>
  
<div id="device-dialog">
<div id="tabs-history" class="tabs">
	<ul>
		<li><a href="#tabs-history-1" name="tabs-history">History</a></li>
	</ul>
	<div id="tabs-history-1">
		<div style='100%;overflow:auto;height:130px'>
		<table width="100%" style='border:solid 1px #CCC'>
			<tr style='background-color:#00CC00;color:#FFFFFF;font-weight:bold;text-align:center'>
				<td>NO</td>
				<td>Tgl</td>
				<td>Jam</td>
				<td>Posisi</td>
				<td>Tag</td>
				<td>Deskripsi</td>
			</tr>
			
			<tr>
				<td>1</td>
				<td>1-1-2012</td>
				<td>10:10</td>
				<td>103.000,6.000</td>
				<td>Pom Bensin</td>
				<td>Pom Bensin Rawamangun - Jl. Balai Pustaka Baru 1</td>				
			</tr>

			<tr>
				<td>1</td>
				<td>1-1-2012</td>
				<td>10:15</td>
				<td>103.000,6.700</td>
				<td>-</td>
				<td>-</td>								
			</tr>

			<tr>
				<td>1</td>
				<td>1-1-2012</td>
				<td>10:20</td>
				<td>103.000,7.00</td>
				<td>-</td>
				<td>-</td>												
			</tr>
			
		</table>
		</div>
	</div>
</div>
</div>

</body>
</html>